<template>
  <div class="dashboard-editor-container">
    <el-row class="dashboard-btn">
      <el-button :type="btnType===1?'warning':'info'" @click="btnClick(1,'date')">当日</el-button>
      <el-button :type="btnType===2?'warning':'info'" @click="btnClick(2,'month')">月份</el-button>
      <el-button :type="btnType===3?'warning':'info'" @click="btnClick(3,'year')">年份</el-button>
      <el-date-picker
        v-if="hackReset"
        v-model="searchFormList.date"
        :type="dateType"
        value-format="timestamp"
        placeholder="选择日期"
        @change="dateChange"
      >
      </el-date-picker>
      <div class="balance" v-if="roleType!==4">所剩余额：<span style="color: red">{{chartData.balance}}</span>万元</div>
      <!--<div class="teamClass" v-if="roleType===0">-->
        <!--<span>所属团队</span>-->
        <!--<el-autocomplete-->
          <!--v-model="searchFormList.teamName"-->
          <!--:fetch-suggestions="querySearchTeam"-->
          <!--@select="handleSelectTeam"-->
          <!--placeholder="请输入内容"-->
        <!--&gt;-->
        <!--</el-autocomplete>-->
      <!--</div>-->
    </el-row>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="chart-wrapper-title">人员调动(人事)</div>
          <staffmobilization :chart-data="chartData" @chartClick="chartClick"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="chart-wrapper-title">财务状态(财务)</div>
          <financial :chart-data="chartData" @chartClick="chartClick"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div class="chart-wrapper-title">项目</div>
          <project :chart-data="chartData" @chartClick="chartClick"/>
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="dialogTitle" :visible.sync="outerVisible" width="1100px">
      <component :personneltransfer-params="personneltransferParams" :is="dialogType" keep-alive></component>
    </el-dialog>

  </div>
</template>

<script>
  import {
    getStatistical,
    selectTeam
  } from '@/api/dashboard'
  import staffmobilization from './components/staffmobilization'
  import financial from './components/financial'
  import project from './components/project'
  import personneltransfer from './components/staffmobilization/personneltransfer'
  import roster from './components/staffmobilization/roster'
  import accountTotal from './components/accountTotal'
  import invoiceTotal from './components/invoiceTotal'
  import costTotal from './components/costTotal'
  import projectApproval from './components/projectApproval'
  import tenders from './components/tenders'

  export default {
    name: 'DashboardAdmin',
    components: {
      staffmobilization,
      financial,
      project,
      personneltransfer,
      roster,
      accountTotal,
      invoiceTotal,
      costTotal,
      projectApproval,
      tenders
    },
    computed: {
      roleType() {
        return this.$store.state.user.roleType
      },
      teamId() {
        return this.$store.state.user.teamId
      },
      teamIds() {
        return this.$store.state.user.teamIds
      }
    },
    mounted() {
      this.$set(this.searchFormList, 'date', new Date().getTime())
      this.searchFormList.roleType = this.roleType
      this.searchFormList.teamId = this.teamId
      this.searchFormList.teamIds = this.teamIds
      this.fetchData()
    },
    data() {
      return {
        searchFormList: {},
        chartData: {},
        btnType: 1,
        dateType: 'date',
        hackReset: true,
        outerVisible: false,
        dialogTitle: '',
        personneltransferParams: {},
        dialogType: ''
      }
    },
    methods: {
      fetchData() {
        this.searchFormList.type = this.btnType
        getStatistical(this.searchFormList).then(response => {
          const data = response.responseBody
          this.chartData = Object.assign({}, this.teamRow, data)
        })
      },
      btnClick(type, dateType) {
        this.btnType = type
        this.dateType = dateType
        this.hackReset = false
        this.$nextTick(() => {
          this.hackReset = true
        })
        this.fetchData()
      },
      dateChange() {
        this.fetchData()
      },
      querySearchTeam(queryString, callback) {
        // queryString 为在框中输入的值
        // callback 回调函数,将处理好的数据推回
        delete this.searchFormList.teamId
        const params = {
          teamName: queryString
        }
        selectTeam(params).then(response => {
          for (const i of response.responseBody) {
            i.value = i.teamName
          }
          let nameList = response.responseBody
          if (nameList.length === 0) {
            nameList = [{ value: '暂无数据' }]
          }
          callback(nameList)
        })
      },
      handleSelectTeam(item) {
        this.$set(this.searchFormList, 'teamId', item.teamId)
        this.$set(this.searchFormList, 'teamName', item.teamName)
        this.searchFormList.roleType = 2
        this.fetchData()
      },
      chartClick(params) {
        this.outerVisible = true
        this.dialogTitle = params.seriesName
        this.personneltransferParams = params.data
        this.personneltransferParams.roleType = this.searchFormList.roleType
        this.personneltransferParams.type = this.searchFormList.type
        this.personneltransferParams.teamId = this.searchFormList.teamId
        this.personneltransferParams.date = this.searchFormList.date
        this.dialogType = this.personneltransferParams.chartChange
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    height: calc(100vh - 130px);
    padding: 32px;
    overflow: auto;
    .dashboard-btn {
      margin-bottom: 20px;
      .balance {
        display: inline-block;
      }
      .teamClass {
        display: inline-block;
        margin-top: 20px;
        span {
          margin: 0 20px;
        }
      }
    }
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
      -moz-box-shadow: 2px 2px 5px #333333;
      -webkit-box-shadow: 2px 2px 5px #333333;
      box-shadow: 2px 2px 5px #333333;
      .chart-wrapper-title {
        margin-bottom: 20px;
      }
    }

  }
</style>
